<template>
    <div class="pageMain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="我的订单" left-arrow @click-left="toBack" />
        </div>

        <van-tabs v-model="active" @change="getData()" title-active-color="#FF3B14" swipeable animated sticky
            offset-top="46" :border="false" swipe-threshold="5">
            <van-tab v-for="(item, index) in cards" :key='index' :title="item.name" :name="item.status + ''">
                <div class="content">
                    <van-pull-refresh v-model="mainLoading" @refresh="mainRefresh">
                        <van-list v-model="Loading" :immediate-check="false" :finished="item.finished"
                            finished-text="没有更多了" @load="moreLoad">
                            <!-- <div class="search" v-if="active == 9" @click="searchOrder">
                                <div>
                                    <van-search readonly v-model="search" input-align="center" placeholder="请输入搜索内容"
                                        :clearable="false" />
                                </div>
                            </div> -->
                            <div class="card" v-for="(mainOrder, mIndex) in item.mainOrders" :key="mIndex">
                                <!-- 订单头部 -->
                                <div class="card-title">
                                    <div class="card-order-num">订单编号：<span>{{ mainOrder.orderNumber }}</span></div>
                                    <div class="card-status" v-if="mainOrder.orderStatus == 0">待付款</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 1">待发货</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 2">待收货</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 3">已完成</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 4">已取消</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 6">特殊处理</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 7">已退款</div>
                                    <div class="card-status" v-else-if="mainOrder.orderStatus == 8">待使用</div>
                                </div>
                                <!-- 商品信息 -->
                                <div class="product" @click="toDetail(mainOrder)"
                                    v-for="(order, oIndex) in mainOrder.orderList" :key='oIndex'>


                                    <img :src="alPath + 'zhenghui/format/' + order.formatImg" class="product-img">


                                    <div class="product-infor">
                                        <!-- 专区商品名字 -->
                                        <div class="product-name">
                                            <span class="product-name-text">{{ order.productName }}</span>
                                        </div>
                                        <div class="product-spec">规格:<span>{{ order.formatName }}</span></div>
                                    </div>
                                    <div class="card-bottom">
                                        <div class="product-price">
                                            <div class="product-price-money" v-if="mainOrder.orderFlag != 12">
                                                <template>￥</template>
                                                <span class="big">{{ order.productPrice | getPriceFront }}</span>
                                                <span>.{{ order.productPrice | getPriceEnd }}</span>
                                            </div>

                                            <div class="product-price-num">
                                                x<span>{{ order.productNum }}</span></div>

                                        </div>
                                        <div v-if="mainOrder.orderStatus == 3 && order.commentStatus == 0"
                                            class="obtn obtn-comment" @click.stop="comment(mainOrder.orderFlag, order)">
                                            评价</div>
                                    </div>

                                </div>

                                <!-- 合计 -->
                                <div class="total">
                                    <div>共计<span>{{ mainOrder.productAllNum }}</span>件商品&nbsp;&nbsp;</div>
                                    <div>合计:
                                        <template v-if="mainOrder.orderFlag != 10">
                                            ￥<span class="big">{{ mainOrder.realSum |
                getPriceFront }}</span><span>.{{ mainOrder.realSum | getPriceEnd
                                                }}</span>
                                        </template>
                                        <template v-else>
                                            {{ mainOrder.usedPoints }} 积分
                                        </template>
                                    </div>
                                </div>
                                <!-- 按钮组 -->
                                <div class="btn-box">
                                    <!-- <div class="obtn obtn-del" v-if="mainOrder.order_status == 4" @click="deteleOrder(mainOrder.order_num)">删除订单</div> -->
                                    <div class="obtn obtn-del" v-if="mainOrder.orderStatus == 0"
                                        @click="cancelOrder(mainOrder.mainId)">取消订单</div>
                                    <div class="obtn obtn-buy" v-if="mainOrder.orderStatus == 0"
                                        @click="toDetail(mainOrder)">去支付</div>
                                    <!-- <div class="obtn obtn-del" v-if="mainOrder.orderStatus == 2"
                                        @click="checkOrder(mainOrder.orderNum)">查看物流</div> -->
                                    <div class="obtn obtn-buy" v-if="mainOrder.orderStatus == 2"
                                        @click="confirmOrder(mainOrder.mainId)">确认收货</div>
                                </div>
                            </div>
                        </van-list>
                        <img v-if="item.mainOrders.length == 0 && item.ifLoad" src="../../assets/order/order_tip.png"
                            class="tip-img">
                    </van-pull-refresh>
                </div>
            </van-tab>
        </van-tabs>

    </div>

</template>

<script>


import { listOrder, deleteOrder, editOrderStatus } from '../../network/order'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            search: '',
            mask: true,
            active: 0,
            mainLoading: false,
            shop_id: localStorage.shopId == undefined ? 1 : localStorage.shopId,
            user_id: localStorage.userId == undefined ? 0 : localStorage.userId,
            order_index: localStorage.order_index == undefined ? 9 : localStorage.order_index,
            cards: [{
                name: '全部',
                status: 9,
                mainOrders: [],
                orders: [],
                ifLoad: false,
                count: 10,
                finished: false
            }, {
                name: '待付款',
                status: 0,
                mainOrders: [],
                orders: [],
                ifLoad: false,
                count: 10,
                finished: false
            }, {
                name: '待发货',
                status: 1,
                mainOrders: [],
                orders: [],
                ifLoad: false,
                count: 10,
                finished: false
            }, {
                name: '待收货',
                status: 2,
                mainOrders: [],
                orders: [],
                ifLoad: false,
                count: 10,
                finished: false
            }, {
                name: '已完成',
                status: 3,
                mainOrders: [],
                orders: [],
                ifLoad: false,
                count: 10,
                finished: false
            }, {
                name: '已取消',
                status: 4,
                mainOrders: [],
                orders: [],
                ifLoad: false,
                count: 10,
                finished: false
            }],
            Loading: false, //干货页 是否开启上拉加载中
            wuliuAlert: false,
            wuliuCom: "",
            wuliuNum: ""


        }
    },
    mounted() {

    },
    methods: {

        toBack() {
            this.$router.go(-1)
        },
        searchOrder: function () {
            // 搜索订单
            this.$router.push('/searchOrder')

        },
        mainRefresh: function () {
            this.getData(true);
        },
        getData: function (isFresh) {
            var that = this;
            //var status = (that.active==4?8:that.active);
            if (isFresh) {
                if (isFresh != "shuaxin") {
                    that.mainLoading = true;
                    var index = 0;
                    if (that.active != 9) {
                        index = that.active * 1 + 1;
                    }
                    that.cards[index].count = 10;
                }
            } else {
                var index = 0;
                if (that.active != 9) {
                    index = that.active * 1 + 1;
                }
                if (that.cards[index].ifLoad) {
                    return false;
                }
            }
            console.log(that.active);
            that.mask = true;

            listOrder({
                shopId: that.shop_id,
                userId: that.user_id,
                flag: that.active,
                page: 1,
                size: 10
            }).then(res => {
                if (res.flag) {

                    if (isFresh) { //关闭下拉刷新
                        if (isFresh != "shuaxin") {
                            that.mainLoading = false;
                            that.$toast({
                                message: "刷新成功",
                                position: "bottom"
                            });
                        }
                    }
                    var data = res.data

                    console.log(data);

                    for (var i = 0; i < data.list.length; i++) {
                        data.list[i].productAllNum = 0;
                        data.list[i].realSum = 0;
                        for (var j = 0; j < data.list[i].orderList.length; j++) {
                            data.list[i].productAllNum += data.list[i].orderList[j]
                                .productNum * 1;
                            data.list[i].realSum += (data.list[i].orderList[j].productNum * 1) * (data.list[i].orderList[j].productPrice * 1);
                        }
                    }
                    if (that.active == 9) {
                        if (data.list.length == 0) {
                            that.cards[0].finished = true;
                        }
                        that.cards[0].mainOrders = data.list;
                        that.cards[0].ifLoad = true;
                    } else {
                        if (data.list.length == 0) {
                            that.cards[that.active * 1 + 1].finished = true;
                        }
                        that.cards[that.active * 1 + 1].mainOrders = data.list.filter(item => {
                            return item.orderStatus == that.active
                        });
                        that.cards[that.active * 1 + 1].ifLoad = true;
                    }
                    console.log(that.cards);


                }
            })


        },
        moreLoad: function () {
            var index = 0;
            if (this.active != 9) {
                index = this.active * 1 + 1;
            }
            this.cards[index].count += 10;
            console.log(this.cards[index].count);
            var that = this;

            console.log(this.cards[index]);
            if (this.cards[index].finished) {
                this.$toast('暂无更多')
                return
            }


            listOrder({
                shopId: that.shop_id,
                userId: that.user_id,
                flag: that.active,
                page: 1,
                size: that.cards[index].count
            }).then(res => {
                if (res.flag) {
                    that.Loading = false;
                    var data = res.data
                    for (var i = 0; i < data.list.length; i++) {
                        data.list[i].productAllNum = 0;
                        data.list[i].realSum = 0;
                        for (var j = 0; j < data.list[i].orderList.length; j++) {
                            data.list[i].productAllNum += data.list[i].orderList[j]
                                .productNum * 1;
                            data.list[i].realSum += (data.list[i].orderList[j].productNum * 1) * (data.list[i].orderList[j].productPrice * 1);
                        }
                    }
                    if (that.active == 9) {
                        if (data.list.length < that.cards[index].count) {
                            that.cards[0].finished = true;
                        } else {
                            that.cards[that.active * 1 + 1].mainOrders = data.list.filter(item => {
                                return item.orderStatus == that.active
                            });
                        }
                    } else {
                        if (data.list.length < that.cards[index].count) {
                            that.cards[that.active * 1 + 1].finished = true;
                        } else {
                            that.cards[that.active * 1 + 1].mainOrders = data.list;
                        }
                    }
                }
            })
        },
        comment: function (order_flag, order) {
            order.order_flag = order_flag;
            localStorage.setItem("goods", JSON.stringify(order));
            // 评价  
        },
        deteleOrder: function (order_num) {
            this.$dialog.confirm({
                title: '提示',
                message: '是否删除该订单信息？',
            })
                .then(function () {
                    deleteOrder({
                        orderNum: order_num
                    }).then(res => {
                        if (res.flag) {
                            this.$toast("删除成功");
                            this.getData("shuaxin");
                        }
                    })
                })
                .catch(function () {
                });

        },
        cancelOrder: function (id) {
            var that = this;
            this.$dialog.confirm({
                title: '提示',
                message: '是否取消该订单？',
            })
                .then(function () {
                    editOrderStatus({
                        mainId: id,
                        orderStatus: 4,
                    }).then(res => {
                        if (res.flag) {
                            that.$toast("取消成功");
                            that.getData("shuaxin");
                        }
                    })
                })
                .catch(function () {
                });

        },
        confirmOrder: function (id) {
            var that = this;
            this.$dialog.confirm({
                title: '提示',
                message: '是否确认收货？',
            })
                .then(function () {
                    editOrderStatus({
                        mainId: id,
                        orderStatus: 3,
                    }).then(res => {
                        if (res.flag) {
                            that.$toast("确认成功");
                            that.getData("shuaxin");
                        }
                    })
                })
                .catch(function () {
                });
        },
        checkOrder: function (order_num) {
            localStorage.order_num = order_num;
            // 查看物流信息

        },

        fuzhi: function (wuliuNum) {
            var oInput = document.createElement('input');
            oInput.value = wuliuNum;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            mui.toast("复制成功");
            oInput.remove();
            //this.wuliuAlert = false;
        },
        toDetail: function (obj) {
            console.log(obj);
            localStorage.order = JSON.stringify(obj);

            // 跳转到订单详情

            this.$router.push('/orderDetail')

        },


    },
    created() {
        this.active = this.order_index;
        if (this.active == "undefined") {
            this.active = 9;
        }
        this.getData();
    },
    //计算属性
    computed: {

    },
    filters: {
        toFixed2: function (value) { //保留两位小数
            return (value * 1).toFixed(2);
        },
        getPriceFront: function (value) { //获取价格整数部分
            return (value * 1).toFixed(2).toString().split(".")[0];
        },
        getPriceEnd: function (value) { //获取价格小数部分
            return (value * 1).toFixed(2).toString().split(".")[1];
        }
    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.pageMain {
    background: #f2f2f2;

}


.content {
    position: relative;
    top: 90px;
    // height: -webkit-calc(100vh - 148px);
    // height: calc(100vh - 148px);
    height: 100vh;
    overflow-y: scroll;
    padding: 24px;
}

.cont76px {
    padding-top: 152px;
}

.search input::-webkit-input-placeholder,
.search textarea::-webkit-input-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.search input:-moz-placeholder,
.search textarea:-moz-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.search input::-moz-placeholder,
.search textarea::-moz-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.search input:-ms-input-placeholder,
.search textarea:-ms-input-placeholder {
    color: #999 !important;
    font-size: 28px;
}

.search {
    position: relative;
    z-index: 6;
    margin-bottom: 24px;
    border-radius: 40px;
    overflow: hidden;
}

.search .van-search__content,
.search .van-search,
.search .van-cell {
    padding: 0 !important;
}

.search .van-search__content {
    background-color: transparent !important;
}

.search .van-field__left-icon {
    display: none !important;
}

.search .van-cell__value {
    border-radius: 40px !important;
    overflow: hidden !important;
}

.search input {
    margin-bottom: 0;
}

.search-tag {
    position: absolute;
    right: 24px;
    top: 12px;
}

.search-tag img {
    width: 40px;
}

.tip-img {
    display: block;
    width: 316px;
    margin: 100px auto;
}

.card {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 24px;
}

.card-order-num {
    font-size: 30px;
    color: #333;
    font-weight: bold;
}

.card-icon {
    display: block;
    width: 32px;
}

.card-status {
    font-size: 24px;
    color: #FF3B14;
}

.product {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 180px;
    padding-left: 204px;
    margin-bottom: 24px;
}

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 16px;
}

.product-infor {
    width: 100%;
}

.product-name {
    position: relative;
    width: 100%;
    height: 40px;
}

.product-name-text {
    font-size: 30px;
    color: #333;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-tag {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    width: 72px;
    height: 32px;
    background: -webkit-linear-gradient(left, #58b530, #adcf03);
    background: linear-gradient(to right, #58b530, #adcf03);
    font-size: 24px;
    color: #FFF;
    text-align: center;
    line-height: 32px;
    border-radius: 0 16px 0 16px;
}

.product-z {
    padding-left: 80px;
}

.product-spec {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #999;
}

.product-price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.product-price-money {
    font-size: 24px;
    color: #333;
    margin-right: 16px;
}

.product-price-money .big {
    font-size: 30px;
}

.product-price-num {
    font-size: 24px;
    color: #999;
}

.total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    width: 100%;
    font-size: 24px;
    color: #333;
    margin-bottom: 36px;
}

.total .big {
    font-size: 30px;
}

.btn-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.obtn {
    // position: relative;
    width: 144px;
    height: 52px;
    border: 2px solid #D6D6D6;
    border-radius: 26px;
    font-size: 28px;
    color: #666;
    text-align: center;
    line-height: 48px;
    margin-left: 16px;
    // z-index: 100;
}

.card-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-icon {
    position: absolute;
    top: 0;
    left: 8px;
    z-index: 2;
    width: 40px;
    height: 48px;
    background: -webkit-linear-gradient(top, #FF8023, #FF3B14);
    background: linear-gradient(to bottom, #FF8023, #FF3B14);
    border-radius: 0 0 48px 48px;
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    line-height: 44px;
    box-shadow: 0 2px 6px #9e9e9e;
}

.tip-nomore {
    width: 100%;
    font-size: 24px;
    color: #999;
    text-align: center;
}

.order-tip {
    display: block;
    width: 376px;
    margin: 56px auto;
}

.obtn-buy {
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    border: none;
    line-height: 52px;
    color: #FFFFFF;
    font-size: 24px;
}

.obtn-del {
    position: relative;
    z-index: 200;
    font-size: 24px;
    background: #DCDCDC;
    border: none;
    line-height: 52px;
    color: #666;
}

.van-tabs--line .van-tabs__wrap {
    border-bottom: 2px solid #F2F2F2;
}


.notice-infor-text {
    width: 100%;
    font-size: 28px;
    color: #2E88EE;
    padding: 12px 0;
    border-bottom: 2px solid #dfdfdf;
}

.notice-infor-text:last-child {
    border-bottom: none;
}

.notice-copy-btn {
    position: absolute;
    bottom: 92px;
    left: 50%;
    width: 268px;
    height: 68px;
    margin-left: -134px;
    background: #DCDCDC;
    font-size: 28px;
    color: #2E88EE;
    line-height: 68px;
    text-align: center;
    border-radius: 34px;
}

.notice-close-btn {
    position: absolute;
    bottom: -56px;
    left: 50%;
    border: 4px solid #FFF;
    border-radius: 50%;
    margin-left: -32px;
}

.notice-close-btn .mui-icon {
    font-size: 56px;
    font-weight: bold;
    color: #FFF;
}


/deep/.van-field__left-icon {
    padding: 0 20px !important;
}
</style>